<template>
  <view class="settings-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">系统设置</text>
    </view>

    <!-- 应用设置 -->
    <view class="settings-section">
      <view class="section-title">应用设置</view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">自动登录</text>
            <text class="setting-desc">下次启动时自动登录</text>
          </view>
          <switch :checked="settings.autoLogin" @change="onAutoLoginChange" />
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">记住密码</text>
            <text class="setting-desc">保存登录密码</text>
          </view>
          <switch :checked="settings.rememberPassword" @change="onRememberPasswordChange" />
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">深色模式</text>
            <text class="setting-desc">使用深色主题</text>
          </view>
          <switch :checked="settings.darkMode" @change="onDarkModeChange" />
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">字体大小</text>
            <text class="setting-desc">调整应用字体大小</text>
          </view>
          <view class="setting-value" @click="showFontSizePicker">
            <text class="value-text">{{ fontSizes[settings.fontSize] }}</text>
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 缓存管理 -->
    <view class="settings-section">
      <view class="section-title">缓存管理</view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">缓存大小</text>
            <text class="setting-desc">当前缓存占用空间</text>
          </view>
          <view class="setting-value">
            <text class="value-text">{{ cacheInfo.totalSize }}</text>
          </view>
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">图片缓存</text>
            <text class="setting-desc">{{ cacheInfo.imageCount }}张图片</text>
          </view>
          <view class="setting-value">
            <text class="value-text">{{ cacheInfo.imageSize }}</text>
          </view>
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">数据缓存</text>
            <text class="setting-desc">{{ cacheInfo.dataCount }}条数据</text>
          </view>
          <view class="setting-value">
            <text class="value-text">{{ cacheInfo.dataSize }}</text>
          </view>
        </view>
        
        <view class="setting-item action-item" @click="clearCache">
          <view class="setting-info">
            <text class="setting-title">清理缓存</text>
            <text class="setting-desc">清理所有缓存数据</text>
          </view>
          <view class="setting-value">
            <u-icon name="trash" size="16" color="#f56c6c"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 隐私设置 -->
    <view class="settings-section">
      <view class="section-title">隐私设置</view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">位置权限</text>
            <text class="setting-desc">允许应用获取位置信息</text>
          </view>
          <switch :checked="settings.locationPermission" @change="onLocationPermissionChange" />
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">相机权限</text>
            <text class="setting-desc">允许应用使用相机</text>
          </view>
          <switch :checked="settings.cameraPermission" @change="onCameraPermissionChange" />
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">数据收集</text>
            <text class="setting-desc">允许收集使用数据以改善服务</text>
          </view>
          <switch :checked="settings.dataCollection" @change="onDataCollectionChange" />
        </view>
      </view>
    </view>

    <!-- 关于应用 -->
    <view class="settings-section">
      <view class="section-title">关于应用</view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">版本号</text>
            <text class="setting-desc">当前应用版本</text>
          </view>
          <view class="setting-value">
            <text class="value-text">{{ appInfo.version }}</text>
          </view>
        </view>
        
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-title">构建时间</text>
            <text class="setting-desc">应用构建日期</text>
          </view>
          <view class="setting-value">
            <text class="value-text">{{ appInfo.buildTime }}</text>
          </view>
        </view>
        
        <view class="setting-item action-item" @click="checkUpdate">
          <view class="setting-info">
            <text class="setting-title">检查更新</text>
            <text class="setting-desc">检查是否有新版本</text>
          </view>
          <view class="setting-value">
            <u-icon name="reload" size="16" color="#409eff"></u-icon>
          </view>
        </view>
        
        <view class="setting-item action-item" @click="showAbout">
          <view class="setting-info">
            <text class="setting-title">关于我们</text>
            <text class="setting-desc">了解更多信息</text>
          </view>
          <view class="setting-value">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 字体大小选择器 -->
    <uni-popup ref="fontSizePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择字体大小</text>
          <text class="popup-close" @click="closeFontSizePicker">关闭</text>
        </view>
        <view class="font-size-list">
          <view 
            v-for="(size, index) in fontSizes" 
            :key="index"
            class="font-size-item"
            :class="{ active: settings.fontSize === index }"
            @click="selectFontSize(index)"
          >
            <text class="font-size-text" :style="{ fontSize: getFontSizeValue(index) }">
              {{ size }}
            </text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
/**
 * 系统设置页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 1.0.0
 */

import { ref, reactive, onMounted } from 'vue'

// 设置数据
const settings = reactive({
  autoLogin: true,
  rememberPassword: false,
  darkMode: false,
  fontSize: 1, // 0-小, 1-中, 2-大
  locationPermission: true,
  cameraPermission: true,
  dataCollection: true
})

// 字体大小选项
const fontSizes = ['小', '中', '大']

// 缓存信息
const cacheInfo = reactive({
  totalSize: '15.6MB',
  imageCount: 45,
  imageSize: '8.2MB',
  dataCount: 128,
  dataSize: '7.4MB'
})

// 应用信息
const appInfo = reactive({
  version: 'v2.1.0',
  buildTime: '2025-01-15'
})

// 弹窗引用
const fontSizePopup = ref(null)

// 设置变更处理
const onAutoLoginChange = (e) => {
  settings.autoLogin = e.detail.value
  saveSettings()
}

const onRememberPasswordChange = (e) => {
  settings.rememberPassword = e.detail.value
  saveSettings()
}

const onDarkModeChange = (e) => {
  settings.darkMode = e.detail.value
  saveSettings()
  // 这里应该应用深色模式
  applyDarkMode()
}

const onLocationPermissionChange = (e) => {
  settings.locationPermission = e.detail.value
  saveSettings()
}

const onCameraPermissionChange = (e) => {
  settings.cameraPermission = e.detail.value
  saveSettings()
}

const onDataCollectionChange = (e) => {
  settings.dataCollection = e.detail.value
  saveSettings()
}

// 保存设置
const saveSettings = () => {
  uni.setStorageSync('appSettings', settings)
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  })
}

// 应用深色模式
const applyDarkMode = () => {
  // 这里应该实现深色模式切换逻辑
  console.log('应用深色模式:', settings.darkMode)
}

// 显示字体大小选择器
const showFontSizePicker = () => {
  fontSizePopup.value.open()
}

// 关闭字体大小选择器
const closeFontSizePicker = () => {
  fontSizePopup.value.close()
}

// 选择字体大小
const selectFontSize = (index) => {
  settings.fontSize = index
  saveSettings()
  closeFontSizePicker()
  // 这里应该应用字体大小
  applyFontSize()
}

// 获取字体大小值
const getFontSizeValue = (index) => {
  const sizes = ['14px', '16px', '18px']
  return sizes[index] || '16px'
}

// 应用字体大小
const applyFontSize = () => {
  // 这里应该实现字体大小切换逻辑
  console.log('应用字体大小:', fontSizes[settings.fontSize])
}

// 清理缓存
const clearCache = () => {
  uni.showModal({
    title: '清理缓存',
    content: '确定要清理所有缓存数据吗？这将清除图片、数据等缓存信息。',
    success: (res) => {
      if (res.confirm) {
        // 模拟清理缓存
        uni.showLoading({
          title: '清理中...'
        })
        
        setTimeout(() => {
          uni.hideLoading()
          // 重置缓存信息
          Object.assign(cacheInfo, {
            totalSize: '0B',
            imageCount: 0,
            imageSize: '0B',
            dataCount: 0,
            dataSize: '0B'
          })
          
          uni.showToast({
            title: '缓存清理完成',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

// 检查更新
const checkUpdate = () => {
  uni.showLoading({
    title: '检查中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '已是最新版本',
      icon: 'success'
    })
  }, 1500)
}

// 显示关于信息
const showAbout = () => {
  uni.navigateTo({
    url: '/pages/profile/about'
  })
}

// 页面加载
onMounted(() => {
  loadSettings()
  loadCacheInfo()
})

// 加载设置
const loadSettings = () => {
  const savedSettings = uni.getStorageSync('appSettings')
  if (savedSettings) {
    Object.assign(settings, savedSettings)
  }
}

// 加载缓存信息
const loadCacheInfo = () => {
  // 这里应该调用API获取实际的缓存信息
  console.log('加载缓存信息')
}
</script>

<style lang="scss" scoped>
.settings-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0;
}

.page-header {
  background: #2d8cf0;
  padding: 20px;
  text-align: center;
  
  .page-title {
    color: white;
    font-size: 18px;
    font-weight: bold;
  }
}

.settings-section {
  background: white;
  margin: 15px;
  border-radius: 10px;
  padding: 20px;
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }
}

.setting-list {
  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.action-item {
      &:active {
        background: #f8f9fa;
      }
    }
    
    .setting-info {
      flex: 1;
      
      .setting-title {
        display: block;
        font-size: 16px;
        color: #333;
        margin-bottom: 5px;
      }
      
      .setting-desc {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
    
    .setting-value {
      display: flex;
      align-items: center;
      
      .value-text {
        font-size: 14px;
        color: #666;
        margin-right: 5px;
      }
      
      .iconfont {
        font-size: 16px;
        color: #ccc;
      }
    }
  }
}

.popup-content {
  background: white;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .popup-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    
    .popup-close {
      font-size: 14px;
      color: #2d8cf0;
    }
  }
  
  .font-size-list {
    .font-size-item {
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;
      text-align: center;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.active {
        color: #2d8cf0;
        font-weight: bold;
      }
      
      .font-size-text {
        font-size: 16px;
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .settings-section {
    margin: 10px;
    padding: 15px;
  }
}

@media screen and (min-width: 376px) and (max-width: 768px) {
  .settings-section {
    margin: 15px;
    padding: 20px;
  }
}

@media screen and (min-width: 769px) {
  .settings-page {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .settings-section {
    margin: 20px;
    padding: 25px;
  }
}
</style>
